<template>
  <div class="out-box">
    <!--城市索引查询-->
    <div class="letter" ref="letter">
        <ul class="right-font">
          <li v-for="item in areaList" @click="turnTo(item.label)"><a href="javascript:;">{{item.label.toUpperCase()}}</a></li>
        </ul>
    <!--城市列表-->
        <div class="container">
            <div class="city-list" v-for="item in areaList">
              <p class="city-letter" :ref="item.label+1">{{item.label.toUpperCase()}}</p>
              <div class="area-out-block" data-id="210300" v-for="items in item.value">
                <div class="left-blank"></div>
                <div class="area-block">{{items.regionName}}</div>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      areaList:[]
    }
  },
  methods:{
    turnTo(data){
      this.$refs.letter.scrollTop = this.$refs[data+1][0].offsetTop;
    },
    getAreaList(){
      this.$resGet("app/business/member/findCQRegion").then(res=>{
        if(res.success){
          console.log(res.data)
          this.areaList = [];
          for(var i in res.data){
            this.areaList.push({
              label:i,
              value:res.data[i]
            })
          }
        }else {
          this.$toast.center(res.message);
        }
      })
    }
  },
  mounted() {
    this.getAreaList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container{height: auto;overflow: hidden;width: 100%;}
  .city-letter{height: 0.35rem;line-height: 0.38rem;width: 100%;background: #f2f2f2;text-align: left;font-size: 0.3rem;padding-left: 0.3rem;}
  .area-out-block{width: auto;height: auto;overflow: hidden;float: left;padding-top: 0.2rem;}
  .container .city-list{padding-bottom: 0.5rem;height: auto;overflow: hidden;width: 100%;}
  .left-blank{height: 0.53rem;width: 0.25rem;float: left;}
  .area-block{float: left; margin-bottom: 0.2rem; width: auto;height: 0.52rem;padding: 0.2rem 0.2rem;line-height: 0.12rem;font-size: 0.3rem;float: left;border: 1px solid #666;border-radius: 0.15rem;}
  .areaActive{color: #ff6616;border-color: #ff6616;}
  .out-box{width: 100%;min-height: 100%;background: #fff;}
  .letter{height: 100%;width: 100%;overflow: scroll;position: relative;}
  .letter .right-font{position: fixed;width: 0.4rem;height: 100%;text-align: center;right: 0;top: 0;}
  .letter .right-font li{text-align: center;height: 0.4rem;line-height: 0.4rem;font-size: 0.3rem;font-weight: bold;color: #999}
  .letter .right-font li a{color: #999}
 </style>
